<!--  -->
<template>
  <div>
    <h1>Vuex的使用案例</h1>
    <h2>当前的求和为:{{sum}}</h2>
    <h2>当前求和放大十倍:{{bigSum}}</h2>
    <hr />
    <h3>我在跟着{{str2}}学习{{str1}}</h3>
    <select name=""
            v-model.number="n">
      <!-- v-model收集的n的值是字符串，可以用number限定符 -->
      <!-- 第二种解决办法:就是给value绑定v-bind:value,这样取到的值就是数字 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <!-- 借助使用助手函数必须需要传递数值给后面方法 -->
    <!-- <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button> -->
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <!-- <button @click="incrementOdd(n)">当为基数是加</button>
    <button @click="incrementWait(n)">异步操作加法</button> -->
    <button @click="jiaOdd(n)">当为基数是加</button>
    <button @click="jiaWait(n)">异步操作加法</button>
    <h2 style="color:red">下面person组件的人数总和一共是:{{personList.length}}</h2>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data () {
    return {
      // 增加的步进
      n: 1,
    }
  },
  computed: {
    // 一.使用计算属性去写属性值
    // he: function () {
    //   return this.$store.state.sum
    // },
    // str1 () {
    //   return this.$store.state.str1
    // },
    // str2 () {
    //   return this.$store.state.str2
    // },


    // -----------------mapState------------------------
    // 二.借助mapState函数写计算属性
    // 2.1.对象写法
    // 这里的he应该包含引号，只是省略了引号
    // ...mapState({ he: "sum", str1: "str1", str2: "str2" }),
    // 2.2 数组写法：名字和state里面的名字要一致
    ...mapState(['sum', "str1", "str2", "personList"]),


    // ------------------mapGetters------------------
    // bigSum () {
    //   return this.$store.getters.bigSum
    // }
    // 3.1 对象写法
    // ...mapGetters({ bigSum: "bigSum" })
    // 3.2 数组写法
    ...mapGetters(['bigSum'])
  },
  methods: {
    // -------------------使用mapMutations--------------------------
    // 程序员自己写代码
    // increment () {
    //   this.$store.commit('JIA', this.n);
    // },
    // decrement () {
    //   this.$store.commit('JIAN', this.n);
    // },
    //  4.1 借助mapMutations用对象方法
    // ...mapMutations({ "increment": "JIA", "decrement": "JIAN" }),

    // 4.2 借助mapMutations使用数组方法:方法名要和mutations里面一致
    ...mapMutations(['JIA', "JIAN"]),

    // ---------------------------使用mapActions-------------------------------
    // 5.1 程序员自己写的代码
    // incrementOdd () {
    //   this.$store.dispatch("jiaOdd", this.n)
    // },
    // incrementWait () {
    //   this.$store.dispatch("jiaWait", this.n)
    // }

    //  5.2 借助mapActions使用对象方法
    // ...mapActions({ "incrementOdd": "jiaOdd", "incrementWait": "jiaWait" })
    // 5.3 借助mapState使用数组方法
    ...mapActions(['jiaOdd', 'jiaWait'])
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {


    // 2.数组写法
  }
}
</script>
<style scoped>
</style>